<template>
	<view class="logs">
		<image class="right_img" :src="IMGLink+'/my/right_bg.png'" mode="widthFix"></image>

		<view class="orderinfo">
			<view class="ordernum">
				<text>订单号：{{orderDetail.serial_num}}</text>
				<text class="create_time">{{orderDetail.create_time}}</text>
			</view>

			<view class="orders">
				<view class="orders_left">
					<image class="shop_img" :src="orderDetail.image"></image>
					<text class="name">{{orderDetail.name}}</text>
				</view>
				<text class="sale">￥{{orderDetail.total_price}}</text>
			</view>

			<view class="real_price">实付金额：{{orderDetail.real_price}}</view>
		</view>

		<view class="steps">
			<view class="delivery">
				<text>{{orderDetail.express_name}}</text>
				<text class="num">{{orderDetail.express_number}}</text>
			</view>
			<uni-steps :options="stepsList" direction="column" :active="0" active-color="#F54642"></uni-steps>
		</view>
	</view>
</template>

<script>
	import {
		orderlist
	} from '../../../api/my/orders.js';
	export default {
		data() {
			return {
				IMGLink: this.IMGLink,
				orderDetail: {},

				stepsList: [],
				orderid: "", //订单num
			}
		},
		onLoad(options) {
			this.orderid = options.serial_num;
			this.getDetail();
		},
		methods: {
			getDetail() {
				uni.showLoading({
					title: '加载中'
				});
				orderlist('orderinfo', {
					serial_num: this.orderid
				}).then(res => {
					this.orderDetail = res.data;
					uni.hideLoading();
					this.getFlowList();
				}).catch(error => {
					uni.hideLoading();
				})
			},

			async getFlowList() {
				orderlist('expressInfo', {
					express_code:this.orderDetail.express_code,
					express_number:this.orderDetail.express_number
				}).then(res => {
					let datas = res.data.list;
					this.stepsList = datas.map(item => {
						return {
							title: item.context,
							desc: item.ftime
						}
					});
				}).catch(error => {})
			},
		}
	}
</script>

<style>
	page {
		background-color: #EFF0F1;
	}
</style>
<style lang="scss" scoped>
	@import "../my.scss";

	.logs {
		box-sizing: border-box;
		height: 328rpx;
		position: relative;
		background: #F54642;
		padding-top: 40rpx;

		.right_img {
			width: 360rpx;
			position: absolute;
			right: 0;
			top: 0;
		}

		.orderinfo {
			@include cards;
			background-color: #FFFFFF;
			color: #0B0B0D;
			font-size: 28rpx;
			padding: 30rpx 20rpx;

			.ordernum {
				@include flexLayout(center, space-between);
				color: #595959;
				font-size: 28rpx;

				.create_time {
					font-size: 24rpx;
				}
			}

			.orders {
				@include flexLayout(center, space-between);
				padding: 20rpx 0;

				&_left {
					@include flexLayout(center, flex-start);

					.shop_img {
						width: 138rpx;
						height: 154rpx;
						border-radius: 12rpx;
						margin-right: 20rpx;
						flex-shrink: 0;
					}

					.name {
						width: 65%;
						@include exceedFlow(3);
					}
				}

				.sale {
					font-weight: 500;
				}
			}

			.real_price {
				text-align: right;
			}
		}

		.steps {
			@include cards;
			background-color: #FFFFFF;
			margin-top: 30rpx;

			.delivery {
				color: #595959;
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 30rpx;

				.num {
					margin-left: 10rpx;
				}
			}

			/deep/ .uni-steps__column-text {
				border-color: transparent;
			}

			/deep/ .uni-steps__column-title {
				font-size: 24rpx;
			}

			/deep/ .uni-steps__column-circle {
				width: 14rpx;
				height: 14rpx;
				background-color: #D8D8D8 !important;
			}

			/deep/ .uni-steps__column-check {
				width: 14rpx;
				height: 14rpx;
				background-color: #F54642 !important;
				border-radius: 50%;
			}

			/deep/ .uni-icons {
				font-size: 0 !important;
			}

			/deep/ .uni-steps__column-line {
				background-color: #D8D8D8 !important;
			}
			/deep/ .uni-steps__column-desc{
				line-height: 50rpx;
			}
		}
	}
</style>
